<template>
  <div id="app">
    <swiper></swiper>
    <nav>
      <ul>
        <li>
          <h1>实时金价<span>（参考国际金价）</span></h1>
          <p>{{goldPrice}}<span>元/克</span><i><img src="../assets/images/redArrows.png" alt=""></i></p>
          <div>(市场价：<s>326.000</s>元/克)</div>
          <router-link :to="{name:'productDeatil',params:{id:idF}}">立即预订</router-link>
        </li>
        <li>
          <h1>实时银价<span>（参考国际银价）</span></h1>
          <p>{{silverPrice}} <span>元/克</span><i><img src="../assets/images/greenArrows.png" alt=""></i></p>
          <div>(市场价：<s>326.000</s>元/克)</div>
          <router-link :to="{name:'productDeatil',params:{id:idS}}">立即预订</router-link>
        </li>
      </ul>
    </nav>

    <echart></echart>

    <div class="function">
      <h1>商城功能</h1>
      <ul>
        <li v-for="item in navDataArray">
          <router-link :to=item.href>
            <img :src=item.src alt="">
            <span>{{item.txt}}</span>
          </router-link>
        </li>
      </ul>
    </div>
    <footers :navIndex="0"></footers>
  </div>
</template>
<script>
  import footers from './commonList/Footer'
  import swiper from './commonList/Swiper'
  import bean from '../assets/images/bean.png'
  import goldSliver from '../assets/images/goldSliver.png'
  import mall from '../assets/images/mall.png'
  import guarantee from '../assets/images/guarantee.png'
  import echart from '../components/commonList/Echart'

  export default {
    name: 'Home',
    components: {
      footers,
      swiper,
      echart
    },
    data() {
      return {
        navDataArray: [
          {'href': '/', 'src': bean, 'txt': '了解金豆'},
          {'href': '/', 'src': goldSliver, 'txt': '金银回购'},
          {'href': '/', 'src': mall, 'txt': '了解商城'},
          {'href': '/', 'src': guarantee, 'txt': '品质保证'},
        ],
        marketDta: [],
        goldPrice: '加载中',
        silverPrice: '加载中',
        idF:'AU',
        idS:'AG'
      }
    },
    mounted() {
      this.websocket()
    },
    methods: {
      websocket() {//初始化websocket
        const wsuri = "ws://192.168.1.150:8060/websocket/quote";
        this.websock = new WebSocket(wsuri);//这里面的this都指向vue
        this.websock.onopen = this.websocketopen;
        this.websock.onmessage = this.websocketonmessage;
        this.websock.onclose = this.websocketclose;
        this.websock.onerror = this.websocketerror;
      },
      websocketopen() {//打开
        // console.log("WebSocket连接成功")
      },
      websocketonmessage(e) { //数据接收
        this.marketDta = e.data.split(",");
        if (this.marketDta[4] == 'AU') {
          this.goldPrice = Number(this.marketDta[5]).toFixed(3)
        }
        if (this.marketDta[4] == 'AG') {
          this.silverPrice = Number(this.marketDta[5]).toFixed(4)
        }
      },
      websocketclose() {  //关闭
        console.log("WebSocket关闭");
      },
      websocketerror() {  //失败
        console.log("WebSocket连接失败");
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  #app {
    nav {
      padding: 1rem 0.5rem 1.38rem;
      ul {
        display: flex;
        background: #fff;
        padding: 0.85rem 0 1.5rem;
        border-radius: 20px;
        box-shadow: 0 0 92px #e8e4e4;
        li {
          flex: 1;
          text-align: center;
          h1 {
            font-size: 0.512rem;
            padding: 0 0 0.7rem 0.49rem;
            span {
              color: #818181;
            }
          }
          p {
            font-size: 1.02rem;
            color: #ff9501;
            position: relative;
            span {
              font-size: 0.55rem;
              color: #000;
            }
            i {
              width: 0.49rem;
              position: absolute;
              top: 0.55rem;
              margin-left: 0.1rem;
            }
          }
          div {
            font-size: 0.469rem;
            color: #929292;
            padding-bottom: 1.25rem;
          }
          a {
            background: #ff9501;
            color: #fff;
            font-size: 0.64rem;
            padding: 0.5rem 1.2rem;
            border-radius: 25px;
          }
        }
      }
    }
    .function {
      padding: 0 0.64rem;
      h1 {
        font-size: 0.725rem;
        color: #343434;
        padding-left: 0.5rem;
      }
      ul {
        display: flex;
        margin: 1.344rem 0;
        li {
          flex: 1;
          text-align: center;
          a {
            display: block;
            img {
              width: 1.28rem;
              margin: 0 auto;
            }
            span {
              font-size: 0.469rem;
              color: #343434;
            }
          }
        }
      }
    }
  }
</style>
